<script setup lang="ts">
import { RouterView, RouterLink, useRouter } from 'vue-router';

const router = useRouter();

const handleLogout = () => {
  localStorage.removeItem('token');
  router.push('/login');
};
</script>

<template>
  <div class="admin-layout">
    <aside class="sidebar">
      <div class="sidebar-header">
        <h2>博客管理后台</h2>
      </div>
      <nav class="sidebar-nav">
        <RouterLink to="/admin/dashboard">仪表盘</RouterLink>
        <RouterLink to="/admin/posts">文章管理</RouterLink>
        <RouterLink to="/admin/settings">站点设置</RouterLink>
      </nav>
      <div class="sidebar-footer">
        <button @click="handleLogout">退出登录</button>
      </div>
    </aside>
    <main class="main-content">
      <RouterView />
    </main>
  </div>
</template>

<style scoped>
.admin-layout {
  display: flex;
  height: 100vh;
}
.sidebar {
  width: 250px;
  background-color: var(--color-background-mute);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}
.sidebar-header {
  padding: 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.sidebar-nav {
  flex-grow: 1;
  padding: 1rem 0;
}
.sidebar-nav a {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--color-text-mute);
  text-decoration: none;
  transition: background-color 0.2s;
}
.sidebar-nav a:hover {
  background-color: var(--color-background-soft);
}
.sidebar-nav a.router-link-exact-active {
  background-color: var(--color-primary);
  color: white;
}
.sidebar-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.sidebar-footer button {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  background-color: #e74c3c;
  color: white;
  cursor: pointer;
}
.sidebar-footer button:hover {
  background-color: #c0392b;
}
.main-content {
  flex-grow: 1;
  padding: 2rem;
  background-color: var(--color-background);
  overflow-y: auto;
}
</style>